<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    .wrap {
      width: 500px;
      margin: 200px auto;
    }
    #content {
      height: 200px;
      max-width: 300px;
      overflow-y: scroll;
      border: 1px solid deepskyblue;
      font-size: 12px;
      color: #666;
      padding-left: 10px;
    }
  </style>
  <body>
    <div class="wrap">
      <input type="text" id="nickname" placeholder="输入昵称" />
      <button id="connect">连接</button>
      <button id="close">断开</button>
      <div id="content"></div>
      <input type="text" id="msg" />
      <button id="send">发送</button>
    </div>
  </body>
</html>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  // 1.建立连接 new WebSocket('服务器地址')
  // 2.监听连接成功的事件 ws.onopen=function(){}
  // 3.发送内容给服务器使用 ws.send('xxx')
  // 4.使用事件监听服务期是否给我们返回了内容 ws.onmessage = function (){}
  // 5.主动关闭连接 使用 ws.close()
  // 6.监听关闭成功 ws.onclose = function(){}
  // 7.连接或者socket出错 ws.onerror = function(){}

  //实现业务（注意：建立websocket连接不能使用file协议）
  // 1.禁用 close msg send
  $("#close").prop("disabled", true);
  $("#msg").prop("disabled", true);
  $("#send").prop("disabled", true);
  // 2.点击连接按钮注册事件
  $("#connect").click(function () {
    let nickname = $("#nickname").val();
    //昵称输入校验
    if (!nickname) {
      alert("昵称的输入不能为空");
      return;
    }
    // 3.建立websocket连接
    let ws = new WebSocket("ws://chst.vip:5200");
    // 4.通过事件来监听连接成功
    ws.onopen = function () {
      console.log("连接成功");
      //   5.获取昵称输入框中的内容 发送给服务器
      ws.send(nickname);
      //   6.解开close msg send的禁用
      // 禁用昵称输入框和connect按钮
      $("#close").prop("disabled", false);
      $("#msg").prop("disabled", false);
      $("#send").prop("disabled", false);
      $("#nickname").prop("disabled", true);
      $("#connect").prop("disabled", true);
      //   7.给发送按钮注册事件
      $("#send").click(function () {});
    };
  });
</script>
